import { useMemo, useEffect, useState, useRef, useLayoutEffect } from "react";
import { addOrder, getAllOrder } from './../../../api/order/normalorder'
import { getAllBuild ,getBuildOne} from "../../../api/build";
import { getAllType ,getFloorOne} from "../../../api/roomType";
import { getAllRoom, }  from '../../../api/room'
import './style.scss'
import {
    Button,
    Table,
    Space,
    Form,
    Input,
    message,
    Modal,
    Row,
    Col,
    Select,
    DatePicker
} from "antd";


const NormalOrder = () => {

    // 获取全部的房型
    const [type, setType] = useState([]);
    const getTypes =  async ()=>{
        const res = await getAllType({limit:2000});
        setType(res.data.map(item => ({ label: item.name, value: item._id })))
    }
    useLayoutEffect(()=>{
        getTypes(); 
    }, [])

    //获取房型对应的所有房间 
    const [room,getRoom] = useState([])
    const [FormRef] = Form.useForm()
    const getaRoom = async value => {
        const re = await getFloorOne({ typeid: value })
        const price = re.data.price
        FormRef.setFieldsValue({price})
        const res = await getAllRoom({ type: value })
        const a = res.data.map( item=> {
                return {
                    id: item._id,
                    roomName: item.roomName,
                    floor: item.floor,
                    buildId: item.buildId,
                    buildname:''
                }
                
            } 
        )  
        for (let it of a) {
            const b = await getBuildOne({ buildid: it.buildId })
            it.buildname = b.data.name
        }
        getRoom(a)
    }
    const sRoom = (e) => {
        const roomname = e.currentTarget.innerText
        FormRef.setFieldsValue({roomname})
    }
    const onFinish = async (value) => {
        console.log(value)
        const res = await addOrder(value)
        
        console.log(res)
        const { success } = res;
        if (!success) return   message.error('添加失败');
        message.success('添加成功');
        FormRef.setFieldsValue({
            name: '',
            stylename: '',
            price: '',
            phone:'',
            openid: '',
            checkIn: '',
            checkOut: '',
            roomname:''
        })
    }

    return (
        <div>
            <Form
                name="advanced_search"
                className="ant-advanced-search-form"
                onFinish={onFinish}
                form={ FormRef}
                
            >
                <Row>
                    <Col span={5}>
                        <Form.Item
                        label="姓名"
                        name="name"
                        rules={[
                            {
                              required: true,
                              message: '姓名不能为空!',
                            },
                        ]}
                        >
                            <Input placeholder="请输入姓名"></Input>
                        </Form.Item>
                    </Col>
                    <Col span={1}></Col>
                    <Col span={5} >
                        <Form.Item
                            label="房型"
                            name="stylename"
                            rules={[
                                {
                                  required: true,
                                  message: '房型不能为空!',
                                },
                            ]}
                        >
                            <Select
                                options={type} onChange={ value=>getaRoom(value)}
                            />
                        </Form.Item>
                    </Col>
                    <Col span={1}></Col>
                    <Col span={5}>
                        <Form.Item
                            label="价格"
                            name="price"
                            rules={[
                                {
                                  required: true,
                                  message: '价格不能为空!',
                                },
                            ]}
                        >
                            <Input placeholder="请输入价格" disabled></Input>
                        </Form.Item>
                    </Col>
                    <Col span={1}></Col>
                    <Col span={5}>
                        <Form.Item
                            label="手机号码"
                            name="phone"
                            rules={[
                                {
                                  required: true,
                                  message: '手机号码不能为空!',
                                },
                            ]}
                        >
                            <Input placeholder="请输入手机号码"></Input>
                        </Form.Item>
                    </Col>
                    <Col span={1}></Col>
                </Row>
                <Row>
                    <Col span={5}>
                        <Form.Item
                            label="身份证号码"
                            name="openid"
                            rules={[
                                {
                                  required: true,
                                  message: '身份证号码不能为空!',
                                },
                            ]}
                        >
                            <Input placeholder="请输入身份证号码"></Input>
                        </Form.Item>
                    </Col>
                    <Col span={1}></Col>
                    <Col span={5}>
                        <Form.Item
                            label="入住时间"
                            name="checkIn"
                            rules={[
                                {
                                  required: true,
                                  message: '入住时间不能为空!',
                                },
                            ]}
                        >
                            <DatePicker  />
                        </Form.Item>
                    </Col>
                    <Col span={1}></Col>
                    <Col span={5}>
                        <Form.Item
                            label="退房时间"
                            name="checkOut"
                            rules={[
                                {
                                  required: true,
                                  message: '退房时间不能为空!',
                                },
                            ]}
                        >
                            <DatePicker  />
                        </Form.Item>
                    </Col>
                    <Col span={1}></Col>
                    <Col span={5}>
                        <Form.Item
                            label="房间号"
                            name="roomname"
                            rules={[
                                {
                                  required: true,
                                  message: '房间号不能为空!',
                                },
                            ]}
                        >
                            <Input placeholder="请输入房间号" disabled></Input>
                        </Form.Item>
                    </Col>
                    <Col span={1}></Col>
                </Row>
                <Row>
                    <Col span={10}></Col>
                    <Col span={4}>
                        <Form.Item >
                            <Button type="primary" htmlType="submit">立即添加</Button>
                        </Form.Item>
                    </Col>
                    <Col span={10}></Col>
                </Row>
            </Form>

            <div className="roomss">
                {room.map(item => (
                    <div key={item.id} onClick={e=>sRoom(e)} value={ item.roomName}>
                        <div>{ item.buildname}</div>
                        <div>{ item.floor}</div>
                        <div>{ item.roomName}</div>
                    </div>
                ))}
            </div>
        </div>
    )
}

export default NormalOrder